<template>
  <div class="main-contianer3 learn-analys">
    <el-select v-model="classId" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.className"
      :value="item.id">
    </el-option>
  </el-select>
  <el-button @click='chaxun'>
    查询
  </el-button>
    <div class="main">
      <p>老师姓名:{{this.list.teacherName}}</p>
      <p style="margin-top: 14px">班级代码:{{this.list.classCode}}</p>
    </div>
    <div class="tabel">
      <InsTable
      tableHeight="800"
      :index="true"
      :table-head="tableHead"
      :table-data="tableData">
        <!-- 自定义列 操作 -->
        <el-table-column slot="finishedRate" slot-scope="headScope"  fixed="right" align="center" :label="headScope.head.label">
          <template slot-scope="scope">
            <span @click="viewTask(scope.row)" style="cursor: pointer;">查看</span>
          </template>
        </el-table-column>
      </InsTable>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getAnalysisAsync, getStudy, getClass } from '@/api/teacher/lesson/analyse'
import InsTable from '@/components/InsTable'

export default {
  name: 'index',
  data () {
    return {
      tableHead: [
        {
          label: '学生姓名', prop: 'stuName'
        }, {
          label: '手机号', prop: 'mobile'
        }, {
          label: '学号', prop: 'stuNo'
        }, {
          label: '操作', prop: 'finishedRate', isSlot: true
        }
      ],
      tableData: [],
      stuId: '1',
      value: '',
      options: [],
      classId: '658023501114527744',
      list: ''
    }
  },
  computed: {
    ...mapGetters([
      'loginInfo'
    ])
  },
  components: {
    InsTable
  },
  mounted () {
    this.getAnalysisAsync()
    this.getStudy()
    this.getClass()
  },
  methods: {
    viewTask (row) {
      console.log(row)
      this.$router.push({ name: 'Analyse', params: { id: row.id } })
    },
    chaxun () {
      this.getStudy()
    },
    // 获取任务列表
    async getAnalysisAsync () {
      const res = await getAnalysisAsync({
        stuId: this.stuId
      })
      if (res.code === '200') {
        this.tableData = res.data.taskList
      } else {
        this.$message.error(res.message)
      }
    },
    // 获取老师下的所有班级
    async getClass () {
      const res = await getClass()
      if (res.code === '200') {
        this.options = res.data
      } else {
        this.$message.error(res.message)
      }
    },
    // 获取老师下的所有学生
    async getStudy () {
      const res = await getStudy({
        classId: this.classId
      })
      if (res.code === '200') {
        console.log(res)
        this.list = res.data
        this.tableData = res.data.studentList
      } else {
        this.$message.error(res.message)
      }
    }
  }
}
</script>
<style scoped lang="scss">
.learn-analys {
  position: relative;
  .main {
    width: 100%;
    background: #999;
    padding: 20px;
    color: #333;
  }
}
</style>
